JavaScript to język, który pomaga w łatwy sposób dodać do stron WWW nowe funkcje. Przy użyciu innych metod (HTML, CSS) część z nich byłaby zbyt trudna do zrealizowania bądź w ogóle niemożliwa.
Historia i możliwości
Język JavaScript powstał za sprawą firmy Netscape, która zaimplementowała jego obsługę w swojej przeglądarce Netscape Navigator 2.0. Była to jedna z największych innowacji w święcie przeglądarek internetowych. Chyba nikt się nie spodziewał, że w przyszłości JS zrobi aż tak dużą karierę. Jeśli chodzi o najpopularniejszą na rynku przeglądarkę – Internet Explorer – JS obecny był już w jej trzeciej wersji. Również przeglądarki Mozilli – Firefox i Mozilla – obsługują JS od początków swojego istnienia. Obecnie język występuje w kilku wersjach, a najnowsza oznaczona jest numerem 1.7.
JavaScript to obiektowy i skryptowy język bezpośrednio łączony z dokumentami HTML, na których pozwala operować. Dzięki JS możemy uzyskać wiele dynamicznych efektów: przewijane paski informacyjne, dynamiczne menu czy też sprawdzanie poprawności wysyłanych formularzy, a zastosowanie technologii AJAX umożliwia otrzymywanie rożnych efektów bez przeładowania strony w przeglądarce.
JavaScript pomocny jest przy budowie dynamicznego głosowania w ankietach, jak również pobierania zawartości konkretnych stron, a interfejs w poczcie Google (Gmail) pozwala na szybkie i kompleksowe odczytywanie e-maili i ich administrację.
Wiele badań wskazuje, że odpowiednio zastosowany kod JavaScript potrafi zwiększyć radość użytkowania strony WWW prawie o 50%. W nowoczesnych przeglądarkach istnieje możliwość wyłączenia obsługi JS, więc należy używać go z rozsądkiem, tak, by nie pozbawić użytkownika podstawowych funkcjonalności witryny. Mimo wszystko, skrypty JS już w minimalnych ilościach mogą okazać się strzałem w dziesiątkę i sposobem na zdobycie wielu odwiedzających.
JavaScript używa niejednorodnej implementacji w rożnych przeglądarkach internetowych, co może spowodować, że zastosowane konstrukcje mogą być nieobsługiwane przez niektóre przeglądarki. Kod JavaScript jednolicie interpretują przeglądarki: Opera, Firefox (i inne na silniku Gecko) oraz Safari; Internet Explorer prezentuje w kilku przypadkach nieco inne podejście.
Warto dodać, że w JavaScripcie możliwa jest również budowa aplikacji okienkowych, dzięki specjalnie stworzonym do tego platformom konwertującym kod. Jest to jednak proceder mało popularny, że względu na ukierunkowanie języka na budowanie stron WWW.
Obecnie, dzięki rozwojowi aplikacji internetowych Web 2.0, JavaScript przeżywa drugą młodość. Trwają prace nad wersją 2.0, w których uczestniczą firmy Netscape i Mozilla Foundation. Również Microsoft tworzy własną jego implementację pod nazwą JScript.Net.
Dla początkujących webmasterów wszelkie nazewnictwo związane z językiem JavaScript może powodować konsternację. Wystarczy wymienić tutaj takie wyrazy jak obiektowy, skryptowy i inne. Dla osób nie mających wcześniej styczności z programowaniem może okazać się to kłopotliwe. Przyglądając się jednak bliżej JS z pewnością można uznać, że nie taki diabeł straszny, jak go malują i niniejszy kurs postara się to dogłębnie ukazać.
Podstawy działania
JavaScript to kod zbudowany z powtarzających się elementów. Co prawda, po wpisaniu byle jakiego elementu języka nie uzyskamy nic konkretnego. Daleko mu do HTML-a, w którym możemy napisać {html}
test
{/html} i uzyskać natychmiastowy efekt.
JavaScript, tak jak wszystkie języki programowania, daje nam swobodę i pozwala zdecydować, co i kiedy ma się wykonać. Daje możliwość ukrycia, na przykład, jakiegoś tekstu po naprowadzeniu na niego wskaźnika myszki, po kliknięciu innego linku/elementu strony, po wciśnięciu jakiegoś klawisza. Warto też dodać, że nie ma w nim tagów charakterystycznych dla HTML-a.
JavaScript opiera się w głównej mierze na interakcji z użytkownikiem korzystającym z danej strony. Jeśli więc chcemy np. ukryć tekst akapitu {html}
…
{/html} po kliknięciu linku, musimy to zaprogramować . Na chłopski rozum, musimy dać linkowi właściwość, która pozwoli wychwycić przeglądarce, że ktoś go właśnie kliknął. Jeśli przeglądarka poprawnie wychwyci klikniecie, uruchamiany jest kod, który zmienia sposób wyświetlania interesującego nas elementu – w tym wypadku akapitu.
Przystępując do nauki języka JavaScript należy znać XHTML i CSS. Bez znajomości ich podstaw może być trudno.
Przyswajanie wiedzy najlepiej przebiega na konkretnych przykładach. W kolejnych częściach kursu będziemy przedstawiać najczęściej spotykane problemy, które z łatwością rozwiąże JS.
Rozpoznawanie tagów po identyfikatorach
Umożliwi to funkcja operująca na elementach dokumentów HTML – {stala}document.getElementById(argument){/stala}, gdzie w miejsce {stala}argument{/stala} wpisujemy id interesującego nas elementu (tagu HTML).
W ten sposób odwołaliśmy się do akapitu o {stala}id=\”more\”{/stala}.
Zmienne i ich wartości
Zmienna akapit przechowuje więc odwołanie do naszego akapitu {html}
{/html}. Dzięki temu możemy wyświetlić wiele właściwości tego paragrafu. Postanowiliśmy dostać się do stylu {stala}display{/stala}. Za pomocą JavaScriptu jest to łatwe i logiczne (rys. 4).
Zmienne są to takie elementy języka JS, które pozwalają przechowywać jakieś wartości. Definiujemy je słówkiem {stala}var{/stala} (od ang. variable), po czym wpisujemy dowolną nazwę zmiennej i przyrównujemy ją do jakiejś wartości, np: {stala}var nazwa_zmiennej = 2;{/stala}
W tym wypadku otrzymamy zmienną o nazwie \”nazwa_zmiennej\” o wartości 2. Zmienne mogą również przechowywać odwołania do innych elementów, o czym później.
Zmiana wartości danej zmiennej/elementu jest podobna do definiowania zmiennej: {stala}zmienna = wartosc;{/stala}. Jeśli natomiast nasza wartość to ciąg liter, wtedy otaczamy ten ciąg apostrofami bądź cudzysłowami: {stala}zmienna = \”Jakas tam wartosc!\”;{/stala}
Właściwości stylów a JavaScript
Jeśli coś ma wartość, to zazwyczaj można ją zmienić. Zmienimy więc {stala}akapit.style.display{/stala} na {stala}block{/stala}:
Wielki finał
Cały dokument wygląda teraz tak jak na listingu nr 4. Kod działa tak, jak sobie zamierzyliśmy.
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.wiecej
a>
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Potrafimy juĹź dostaÄ siÄ do konkretnego elementu dokumentu HTML o okreĹlonym id, a takĹźe zmieniÄ wĹaĹciwoĹci jego stylĂłw. W nastÄpnej czÄĹci kursu przedstawiÄ nowe funkcjonalnoĹci, ktĂłre moĹźna zastosowaÄ do powyĹźszego, wciÄ Ĺź prymitywnego, skryptu, a takĹźe omĂłwiÄ argumenty funkcji i inne elementy jÄzyka, ktĂłre zostaĹy pominiÄte.
Magia onclick
Naszym zadaniem jest przechwycenie informacji o tym czy ktoĹ kliknÄ Ĺ link \”wiÄcej\”. W tym celu korzystamy z gotowego elementu jÄzyka JavaScript – {stala}onclick{/stala}.
wiecej
Wstawienie {stala}onclick=\”\”{/stala} do jakiegokolwiek tagu HTML powoduje, Ĺźe po klikniÄciu jego zawartoĹci wykona siÄ kod zawarty miÄdzy cudzysĹowami. Najprostszym i najczÄĹciej wykorzystywanym przykĹadem dziaĹania {stala}onclick{/stala} we wszelakich kursach jest wykorzystanie w duecie kolejnej funkcji jÄzyka, jakÄ jest {stala}alert(){/stala}:
wiecej
{stala}alert(\’Jakis tekst\’);{/stala} jest to wbudowany element jÄzyka JavaScript, ktĂłry nazywamy funkcjÄ . Natomiast \”JakiĹ tekst\” to argument funkcji. Wszystkie funkcje jÄzyka JavaScript, ktĂłre wywoĹujemy, moĹźna poznaÄ po tej samej budowie: {stala}nazwa(argumenty);{/stala}.
Jak widzimy (rys. 3), po klikniÄciu linku \”wiÄcej\” pojawia siÄ okienko z treĹciÄ , ktĂłrÄ wpisaliĹmy w apostrofach otoczonych nawiasem.
Okienka ostrzeĹźeĹ alert()
Teraz musimy stworzyÄ coĹ podobnego do {stala}alert(){/stala}, tyle Ĺźe zmieniajÄ cego sposĂłb wyĹwietlania akapitu z rozszerzonÄ treĹciÄ newsa. O ile {stala}alert(){/stala} jest funkcjÄ wbudowana w jÄzyk, o tyle funkcja obsĹugujÄ ca akapit bÄdzie zdefiniowana przez nas. CaĹoĹÄ umieĹcimy pomiÄdzy {html}{/html} w sekcji {html}
{/html} naszego dokumentu.NaszÄ funkcjÄ nazwiemy PokazAkapit, zatem analogicznie link \”wiÄcej\” bÄdzie wyglÄ daĹ tak:
wiecej
A caĹy dokument tak jak na listingu 3.
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Fundamenty pierwszego skryptu
Napiszemy teraz fundamenty pierwszego skryptu, oczywiĹcie pomiÄdzy znacznikami {html}{/html}.
Jak widaÄ, na razie w funkcji nie ma Ĺźadnego kodu, a co za tym idzie – naleĹźy go uzupeĹniÄ zgodnie z naszymi zamiarami.
Przypomnijmy: naszym celem jest wyĹwietlenie akapitu z rozszerzonÄ treĹciÄ newsa. Najpierw ustaliliĹmy, Ĺźe akapit ten bÄdzie miaĹ ustawiony parametr stylĂłw {stala}display: none;{/stala}. Problemem jest teraz, jak zmieniÄ go z powrotem na {stala}display: block;{/stala}. Musimy wiÄc dostaÄ siÄ do wĹaĹciwoĹci stylĂłw akapitu o identyfikatorze {stala}id=\”more\”{/stala}.
Pierwsze kroki
Mamy prosty dokument HTML z pojedynczym, skrĂłconym newsem (rys. 1, listing 1). Naszym celem bÄdzie umoĹźliwienie szybkiego podejrzenia caĹej wiadomoĹci po klikniÄciu linku wiÄcej.
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Jak widzimy, sprawa jest doĹÄ prosta. Mamy jeden {html}
{/html}. Na razie jednak efekt jest niepoĹźÄ dany. Drugi akapit, bÄdÄ cy rozwiniÄciem treĹci, miaĹ byÄ przecieĹź ukryty. Ukrywamy go (rys. 2) za pomocÄ CSS: {stala}style=\”display: none;\”{/stala}.
|
|
|
Vivamus pretium...
Inna moĹźliwoĹÄ ukrycia akapitu to zdefiniowanie stylu {stala}display: none;{/stala} w oddzielnym arkuszu stylĂłw. Niestety, JS nie odczyta tej wartoĹci. Trzeba jÄ zdefiniowaÄ bezpoĹrednio w dokumencie HTML.
NastÄpnie w dokumencie HTML musi pojawiÄ siÄ kod JavaScript. MoĹźna go doĹÄ czyÄ do dokumentu w dowolnym pliku o rozszerzeniu .js, podobnie jak pliki CSS doĹÄ cza siÄ w plikach .css. Dobrym zwyczajem jest doĹÄ czanie plikĂłw .js w sekcji {html}
{/html}. Mianowicie:
Strona z newsem
Jak moĹźna zauwaĹźyÄ, caĹoĹÄ opiera siÄ na znacznikach {html}
- {stala}type=\"text/javascript\"{/stala} - parametr obowiÄ zkowy, okreĹla typ doĹÄ czonego pliku,
- {stala}src=\"skrypt.js\"{/stala} - ĹcieĹźka do pliku z kodem JavaScript.
Istnieje rĂłwnieĹź moĹźliwoĹÄ bezpoĹredniego doĹÄ czania kodu JavaScript do plikĂłw HTML. Skorzystamy z tej moĹźliwoĹci w dalszej czÄĹci:
Strona z newsem
SposĂłb wklejenia kodu JS do dokumentu HTML nie odgrywa wiÄkszej roli, efekt bÄdzie zawsze taki sam.
Mamy wiÄc peĹny dokument HTML gotowy do doĹÄ czenia niezbÄdnego kodu JavaScript (listing 2).
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
